import React, { useEffect, useState, useRef } from 'react';
import { Col, Form, Radio, Space, Tag, Input } from 'antd';
import MyIcon from '../MyIcon';
import tagSelectCls from './styles.less';
import type { InputRef } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

interface ITagSelectNew {
  formName: string;
  formLabel: string;
  defalultKeys?: number | string;
  radioList: Record<string, any>[]; // {value: "", name: ""}
  radioDisabled?: boolean;
  onChange?: (e: any) => void;
  formRequired?: boolean;
  colSpan?: number;
  onAddTag?: (e: any) => void;
  onDelTag?: (e: any) => void;
}

export const TagSelectNew: React.FC<ITagSelectNew> = ({
  formName,
  formLabel,
  radioList,
  defalultKeys = 0,
  radioDisabled = false,
  onChange,
  formRequired = false,
  colSpan = 24,
  onAddTag,
  onDelTag,
}) => {
  const [selectKeys, setSelectKeys] = useState<string>(defalultKeys || defalultKeys == 0 ? defalultKeys : radioList?.[0]?.value);

  const [tagList, setTagList] = useState(radioList);

  const [inputVisible, setInputVisible] = useState<boolean>(false);
  const inputRef = useRef<InputRef>(null);
  const [inputValue, setInputValue] = useState('');

  const commonTagList = [
    {
      value: '001',
      name: '同意。',
    },
    {
      value: '002',
      name: '不同意。',
    },
    {
      value: '003',
      name: '己阅。',
    },
    {
      value: '004',
      name: '办结。',
    },
  ];

  useEffect(() => {
    setTagList(radioList);
  }, [radioList]);

  useEffect(() => {
    if (defalultKeys || defalultKeys == 0) {
      setSelectKeys(String(defalultKeys));
    }
  }, [defalultKeys]);

  useEffect(() => {
    if (inputVisible) {
      inputRef.current?.focus();
    }
  }, [inputVisible]);

  const onChangeSwitch = (item) => {
    const checkKey: string = item?.value;
    setSelectKeys(checkKey);
    if (onChange) {
      onChange(item?.name);
    }
  };

  const onHandleClose = (item) => {
    if (onDelTag) onDelTag(item.value);
  };

  const showInput = () => {
    setInputVisible(true);
  };
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleInputConfirm = () => {
    let isHas = false;
    tagList.map((item) => {
      if (item.name == inputValue) {
        isHas = true;
      }
    });
    if (inputValue && !isHas && onAddTag) {
      onAddTag(inputValue);
    }
    setInputVisible(false);
    setInputValue('');
  };

  return (
    <Col span={colSpan}>
      <Form.Item
        name={formName}
        label={formLabel}
        rules={[
          {
            required: formRequired,
            message: `请选择${formLabel}`,
          },
        ]}
        initialValue={selectKeys}
      >
        {/* <Radio.Group
          style={{ whiteSpace: 'nowrap' }}
          onChange={onChangeSwitch}
          disabled={radioDisabled}
          className={tagSelectCls['TagSelectNewCls']}
          // defaultValue={selectKeys}
          // value={selectKeys}
        > */}
        <Space wrap size={[0, 8]} style={{ height: '100%' }}>
          {commonTagList?.map((item: any) => {
            return (
              <Tag
                color={selectKeys == item?.value ? 'processing' : 'default'}
                onClick={() => {
                  onChangeSwitch(item);
                }}
                key={item.value}
                style={{
                  whiteSpace: 'normal',
                  cursor: 'pointer',
                }}
              >
                {item?.name}
              </Tag>
            );
          })}

          {tagList?.map((item: any) => {
            return (
              <Tag
                color={selectKeys == item?.value ? 'processing' : 'default'}
                onClick={() => {
                  onChangeSwitch(item);
                }}
                closable
                onClose={() => onHandleClose(item)}
                key={item.value}
                style={{
                  whiteSpace: 'normal',
                  cursor: 'pointer',
                }}
              >
                {item?.name}
              </Tag>
            );
          })}

          {!inputVisible && (
            <Tag className="site-tag-plus" onClick={showInput}>
              <PlusOutlined />
            </Tag>
          )}

          {inputVisible && (
            <Input
              ref={inputRef}
              style={{ width: '100%' }}
              type="text"
              size="small"
              className="tag-input"
              value={inputValue}
              onChange={handleInputChange}
              onBlur={handleInputConfirm}
              onPressEnter={handleInputConfirm}
              maxLength={100}
            />
          )}
        </Space>
        {/* </Radio.Group> */}
      </Form.Item>
    </Col>
  );
};
